import React, { useState, useEffect, useCallback } from 'react';
import { postAccAmoebaOutboundFindLy, getAccAmoebaOutboundAffirm } from '../../../financialApi';
import { ClaimStatus } from '../../enum';
import SelectModule from '../components/SelectModule';
import OkAndNoStateModule from '../components/OkAndNoStateModule';
import { ReceiveConfirmPageAll, ReceiveConfirmPageTop, ReceiveConfirmPageContent } from './style';
import { message, PageHeader, Table, Button, Modal, Space } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;

/**
 * @description: 内部交易 -- 材料交易单 -- 领用确认
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-09-18） 创建
 */


const ReceiveConfirmPage = () => {
    const [listData, setListData] = useState([]);
    const [pagingData, setPagingData] = useState({
        currentPage: 1,
        size: 10,
        total: 0
    })
    const [selectData, setSelectData] = useState({}); //搜索data
    const [okAndNoStateModuleShow, setOkAndNoStateModuleShow] = useState(false);
    const [clickId, setClickId] = useState(undefined);
    const listFun = useCallback(
        (parames = {
            currentPage: 1,
            size: 10
        }) => {
            ; (async () => {
                const { code, msg, data } = await postAccAmoebaOutboundFindLy(parames);
                if (code === '20000') {
                    setListData(data.records);
                    setPagingData({
                        currentPage: parames.currentPage,
                        size: parames.size,
                        total: data.total
                    });
                } else {
                    message.error(msg);
                }
            })();
        },
        [],
    )
    useEffect(() => {
        listFun();
    }, [listFun])
    //搜索-- 搜索
    const handleSelectModuleOk = (values = {
        ...selectData
    }) => {
        const parames = {
            currentPage: 1,
            size: 10,
            ...values
        }
        setSelectData(values)
        listFun(parames);
    }
    //搜索-- 重置
    const handleSelectModuleReset = () => {
        listFun();
    }
    //分页
    const pagination = {
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${pagingData.total}条`,
        //每页条数
        pageSize: pagingData.size,
        //当前页数
        current: pagingData.currentPage,
        //数据总数
        total: pagingData.total,
        //pageSize 变化的回调
        onShowSizeChange: (current, pageSize) => changePageSize(pageSize, current),
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current) => changePage(current),
    }
    //改变每页条数
    const changePageSize = (pageSizeFun, current) => {
        const parames = {
            currentPage: current,
            size: pageSizeFun,
            ...selectData
        }
        listFun(parames);
    }
    //改变页数
    const changePage = (current) => {
        const parames = {
            currentPage: current,
            size: pagingData.size,
            ...selectData
        }
        listFun(parames);
    }
    //驳回
    const handleNo = id => {
        setClickId(id);
        setOkAndNoStateModuleShow(true)
    }
    //确认领用
    const handleOk = id => {
        const parames = {
            id,
            isReceive: true
        }
        confirm({
            title: '确定要领取吗?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
              ;(async () => {
                const {code, msg} = await getAccAmoebaOutboundAffirm(parames);
                if(code === '20000') {
                    message.success('领用成功!');
                    listFun();
                }else{
                    message.error(msg);
                }
              })();
            }
          });
    }
    const columns = [
        {
            title: '序号',
            align: 'center',
            width: '60px',
            render: (text, recode, index) => <span>{index + 1}</span>
        },
        {
            title: '出库单号',
            align: 'center',
            dataIndex: 'orderNo'
        },
        {
            title: '关联合同',
            align: 'center',
            dataIndex: 'conNo'
        },
        {
            title: '出库时间',
            align: 'center',
            dataIndex: 'outBoundTime'
        },
        {
            title: '使用性质',
            align: 'center',
            dataIndex: 'nature'
        },
        {
            title: '出库金额',
            align: 'center',
            dataIndex: 'outBoundMoney'
        },
        {
            title: '领用状态',
            align: 'center',
            dataIndex: 'state',
            render: text => <span>{ClaimStatus[text]}</span>
        },
        {
            title: '操作',
            align: 'center',
            render: (text, recode) => <Space>
                <Button type="primary"  onClick={() => handleOk(recode.id)} ghost>确认</Button>
                <Button type="primary" danger  onClick={() => handleNo(recode.id)} ghost>驳回</Button>
            </Space>
        },

    ];
    return <ReceiveConfirmPageAll>
        <ReceiveConfirmPageTop>
            <SelectModule
                pageName='leaveWarehouse'
                handleSelectModuleOk={handleSelectModuleOk}
                handleSelectModuleReset={handleSelectModuleReset}
            />
        </ReceiveConfirmPageTop>
        <ReceiveConfirmPageContent>
            <PageHeader
                className="site-page-header"
                title="全部列表"
            />
            <Table dataSource={listData} columns={columns} rowKey='id' pagination={pagination} />

        </ReceiveConfirmPageContent>
        <OkAndNoStateModule 
            okAndNoStateModuleShow = {okAndNoStateModuleShow}
            setOkAndNoStateModuleShow= {setOkAndNoStateModuleShow}
            clickId = {clickId}
            handleSelectModuleOk = {handleSelectModuleOk}
        />
    </ReceiveConfirmPageAll>
}

export default ReceiveConfirmPage;